<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>书籍新增</title>
</head>

<body class="no-skin">

<!--导航部分-->
<div th:replace="_fragment :: nav"></div>

<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <!--侧边栏-->
    <div th:replace="_fragment :: menu(3,3.1)"></div>

    <div class="main-content" >
        <div class="breadcrumbs" id="breadcrumbs">
            <script type="text/javascript">
                try {
                    ace.settings.check('breadcrumbs', 'fixed')
                } catch (e) {
                }
            </script>

            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a th:href="@{/admin/toIndex}">首页</a>
                </li>

                <li>
                    <a th:href="@{/admin/toBook}">书籍</a>
                </li>
                <li class="active">新增</li>
            </ul><!-- /.breadcrumb -->
        </div>

        <div class="page-content">

            <div class="page-content-area">

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h3 class="header smaller lighter blue">书籍信息</h3>
                        <div class="table-header lighter">
                            》
                        </div>

                        <!--表单-->
                        <form class="form-horizontal" id="validation-form" th:method="post" th:action="@{/admin/saveBook}" enctype="multipart/form-data">
                            <table class="mdui-table mdui-table-hoverable">
                                <thead>
                                <tr>
                                    <th>输入以下书籍信息</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td style="text-align: right">书名:</td>
                                    <td>
                                        <input type="text" name="name" id="name"
                                               class="col-xs-12 col-sm-6" onblur="isBookName()" placeholder="请输入书名"/>
                                        <span id="errorMsg-bookName" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">作者:</td>
                                    <td>
                                        <input type="text" name="author" id="author"
                                               class="col-xs-12 col-sm-6" onblur="isAuthor()" placeholder="请输入作者"/>
                                        <span id="errorMsg-author" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">出版社:</td>
                                    <td>
                                        <input type="text" name="publishHouse" id="publishHouse"
                                               class="col-xs-12 col-sm-6" onblur="isPublishHouse()" placeholder="请输入出版社"/>
                                        <span id="errorMsg-publishHouse" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">价格:</td>
                                    <td>
                                        <input type="text" name="priceStr" id="priceStr"
                                               class="col-xs-12 col-sm-6" onblur="isPriceStr()" placeholder="请输入单价，单位：元"/>
                                        <span id="errorMsg-priceStr" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">描述:</td>
                                    <td><textarea style="padding: 5px;" name="description" id="description"
                                                  class="col-xs-12 col-sm-6" onblur="isDescription()" placeholder="请输入书本的描述"></textarea>
                                        <span id="errorMsg-description" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">库存:</td>
                                    <td>
                                        <input type="text" name="stock" id="stock"
                                               class="col-xs-12 col-sm-6" onblur="isStock()" placeholder="请输入库存"/>
                                        <span id="errorMsg-stock" style="height: 33px; line-height: 33px; margin-left: 5px; color: red;"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">是否推荐:</td>
                                    <td>
                                        <select id="recommend" name="recommend" class="select2"
                                                data-placeholder="Click to Choose...">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">类别:</td>
                                    <td>
                                        <select id="categoryId" name="categoryId" class="select2"
                                                data-placeholder="Click to Choose...">
                                            <option th:each="category,stat:${categories}" th:value="${category.id}">[[${category.name}]]</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: right">轮播图:</td>
                                    <td>
                                        <div class="col-xs-12 col-sm-9">
                                            <div style="width: 800px;height: 200px;padding-top: 8px;">
                                                <form id="form" th:action="@{/admin/uploadImage}" method="post" enctype="multipart/form-data">
                                                    <div class="row form-group">
                                                        <div class="col-sm-12">
                                                            <input id="input-id" name="file" multiple="multiple" th:multiple="multiple" type="file" data-show-caption="true"/>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>

                            <div style="margin-top: 20px;"></div>

                            <input type="text" name="bookId" id="bookId" value="20" hidden />

                            <div class="col-xs-4"></div>
                            <div class="">
                                <button class="btn btn-info" type="button" id="sub">
                                    <i class="ace-icon fa fa-check bigger-110"></i>
                                    提交
                                </button>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <button class="btn" type="reset">
                                    重置
                                    <i class="ace-icon fa fa-undo bigger-110"></i>
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
                <hr/>
            </div><!-- /.widget-main -->
        </div><!-- /.widget-body -->
    </div>

</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content-area -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->

<div th:replace="_fragment::footer"></div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->


<!--引入js	-->
<th:block th:replace="_fragment::script"></th:block>

<!--<script src="../static/bootstrap-fileinput/js/jquery-3.3.1.min.js" th:src="@{/static/bootstrap-fileinput/js/jquery-3.3.1.min.js}"></script>
<script src="../static/bootstrap-fileinput/js/bootstrap.min.js" th:src="@{/static/bootstrap-fileinput/js/bootstrap.min.js}"></script>-->
<script src="../static/bootstrap-fileinput/js/fileinput.min.js" th:src="@{/static/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script src="../static/bootstrap-fileinput/js/zh.js" th:src="@{/static/bootstrap-fileinput/js/zh.js}"></script>
<script src="../static/bootstrap-fileinput/js/layer.js" th:src="@{/static/bootstrap-fileinput/js/layer.js}"></script>

<script type="text/javascript">

    function isBookName(){
        var bookName = $("#name").val();
        if(bookName == null || bookName == ""){
            $("#errorMsg-bookName").html("不能为空");
            return false;
        }else{
            $("#errorMsg-bookName").html("");
            return true;
        }
    }

    function isAuthor() {
        var author = $("#author").val();
        if(author == null || author == ""){
            $("#errorMsg-author").html("不能为空");
            return false;
        }else{
            $("#errorMsg-author").html("");
            return true;
        }
    }

    function isPublishHouse() {
        var publishHouse = $("#publishHouse").val();
        if(publishHouse == null || publishHouse == ""){
            $("#errorMsg-publishHouse").html("不能为空");
            return false;
        }else{
            $("#errorMsg-publishHouse").html("");
            return true;
        }
    }

    function isPriceStr() {
        var priceStr = $("#priceStr").val();
        if(priceStr == null || priceStr == ""){
            $("#errorMsg-priceStr").html("不能为空");
            return false;
        }else{
            $("#errorMsg-priceStr").html("");
            return true;
        }
    }

    function isDescription() {
        var description = $("#description").val();
        if(description == null || description == ""){
            $("#errorMsg-description").html("不能为空");
            return false;
        }else{
            $("#errorMsg-description").html("");
            return true;
        }
    }

    function isStock() {
        var stock = $("#stock").val();
        if(stock == null || stock == ""){
            $("#errorMsg-stock").html("不能为空");
            return false;
        }else{
            $("#errorMsg-stock").html("");
            return true;
        }
    }

    //提交表单
    $("#sub").click(function () {
        if(isBookName() && isAuthor() && isPublishHouse() && isPriceStr() && isDescription() && isStock()){
            $.fn.serializeObject = function() {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function() {
                    if (o[this.name]) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
                return o;
            };
            //获取表单数据转为json串
            var para = $('#validation-form').serializeObject() ;
            para = JSON.stringify(para);

            $.ajax({
                type:"post",
                async:true,
                url:'saveBook',
                data:para ,
                contentType:"application/json",
                dataType:"json",
                success:function (res) {
                    $("#bookId").val(res.data.id);
                    go();   //上传图片
                },
                error:function (res) {
                    console.log(res);
                }
            })
        }
    });


    //触发插件上传图片
    function go(){
        $("#input-id").fileinput('upload');
    }

    $(function () {
        initFileInput("input-id");
    });
    //初始化
    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: "/admin/uploadImage", //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            uploadAsync: false, //默认异步上传
            showUpload: false, //是否显示上传按钮
            showRemove : false, //显示移除按钮
            showPreview : true, //是否显示预览
            showCaption: false,//是否显示标题
            showCancel:false,   //是否显示上传取消按钮，只有ajax才会使用
            dropZoneEnabled: true,//是否显示拖拽区域
            browseClass: "btn btn-sm btn-primary", //按钮样式
            maxFileCount: 3, //允许同时上传的最大文件个数
            enctype: 'multipart/form-data',
            validateInitialCount:true,  //是否验证初始计数
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

            layoutTemplates :{
                // actionDelete:'', //去除上传预览的缩略图中的删除图标
                actionUpload:'',//去除上传预览缩略图中的上传图片；
                actionZoom:'',   //去除上传预览缩略图详情的图标
                actionDownload:'' //去除上传预览缩略图中的下载图标
            },
            uploadExtraData:function () {   //向后台传递的附带参数
                var data = {id:$("#bookId").val()}
                return data;
            }
            // initialPreviewAsData: true,
            // initialPreview:['http://placekitten.com/g/200/300']
        }).on('filebatchuploadsuccess', function(event, data, previewId, index) {     //上传中
            console.log('文件正在上传');
        }).on("filebatchuploadsuccess", function (event, data, previewId, index) {    //一个文件上传成功
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            //console.log(response);//打印出返回的json
            window.location.href = "/admin/toBook";
        }).on('filebatchuploaderror', function(event, data, msg) {  //一个文件上传失败
            console.log('文件上传失败！'+data.status);
        })
    }




</script>
<!-- inline scripts related to this page -->
<!--<script type="text/javascript">-->

<!--    function isUserName() {-->
<!--        var userName = $("#loginUser").val();-->
<!--        if(userName == null || userName == ""){-->
<!--            $("#errorMsg-userName").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            $("#errorMsg-userName").html("");-->
<!--            return true;-->
<!--        }-->
<!--    }-->

<!--    function isPassword() {-->
<!--        var password = $("#password").val();-->
<!--        if(password == null || password == ""){-->
<!--            $("#errorMsg-password").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            $("#errorMsg-password").html("");-->
<!--            return true;-->
<!--        }-->
<!--    }-->




<!--    function isPassword2() {-->
<!--        var p1 = $("#password").val();-->
<!--        var p2 = $("#password2").val();-->
<!--        if(p2 == null || p2 == ""){-->
<!--            $("#errorMsg-password2").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            if(p1 != p2){-->
<!--                $("#errorMsg-password2").html("两次输入的密码不同");-->
<!--                return false;-->
<!--            }else{-->
<!--                $("#errorMsg-password2").html("");-->
<!--                return true;-->
<!--            }-->
<!--        }-->
<!--    }-->


<!--    function isPhone() {-->
<!--        var phone = $("#phone").val();-->
<!--        if(phone == null || phone == ""){-->
<!--            $("#errorMsg-phone").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            if(!(/^1[3456789]\d{9}$/.test(phone))){-->
<!--                $("#errorMsg-phone").html("手机号码格式错误");-->
<!--                return false;-->
<!--            }else{-->
<!--                $("#errorMsg-phone").html("");-->
<!--                return true;-->
<!--            }-->
<!--        }-->
<!--    }-->


<!--    function isAddress() {-->
<!--        var address = $("#address").val();-->
<!--        if(address == null || address == ""){-->
<!--            $("#errorMsg-address").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            $("#errorMsg-address").html("");-->
<!--            return true;-->
<!--        }-->
<!--    }-->

<!--    function isFile() {-->
<!--        var file = $("#id-input-file-2").val();-->
<!--        if(file == null || file == ""){-->
<!--            $("#errorMsg-file").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            $("#errorMsg-file").html("");-->
<!--            return true;-->
<!--        }-->
<!--    }-->



<!--    function isEmail() {-->
<!--        var email = $("#email").val();-->
<!--        var reg = /^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;-->
<!--        if(email == null || email == ""){-->
<!--            $("#errorMsg-email").html("不能为空");-->
<!--            return false;-->
<!--        }else{-->
<!--            if(!reg.test(email)){-->
<!--                $("#errorMsg-email").html("邮箱格式错误");-->
<!--                return false;-->
<!--            }else{-->
<!--                $("#errorMsg-email").html("");-->
<!--                return true;-->
<!--            }-->
<!--        }-->
<!--    }-->





<!--</script>-->
<!--<script>-->
<!--    function subForm() {-->
<!--        var isTrue = isUserName() && isPassword() && isPassword2() && isPhone() && isAddress() && isEmail();-->
<!--        if(isTrue){-->
<!--            $("#validation-form").submit();-->
<!--        }-->
<!--    }-->

<!--</script>-->

</body>
</html>
